<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="panel-info">
          <div class="panel-title">在制品信息环图</div>
          <div class="panel-body">
            <div v-if="showEcharts">
              <div id="main" style="width: 310px; height: 350px"></div>
            </div>
            <div v-else>
              <el-empty description="无数据"></el-empty>
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="18">
        <div class="panel-info" v-loading="pageLoading">
          <div class="panel-title">在制品信息列表</div>
          <div class="panel-body">
            <div class="filter-container" style="flex-wrap: wrap">
              <el-select class="filter-item" style="width: 230px" v-model="query.queryString.line" placeholder="选择线别"
                filterable clearable @clear="search" @change="search">
                <el-option v-for="(item, index) in options.line" :key="index" :value="item.id" :label="item.line_name">
                </el-option>
              </el-select>
              <el-select class="filter-item" style="width: 230px" v-model="query.queryString.group" placeholder="选择工序"
                filterable clearable @clear="search" @change="search">
                <el-option v-for="(item, index) in options.group" :key="index" :value="item.id"
                  :label="item.group_name">
                </el-option>
              </el-select>
              <el-input class="filter-item" style="width: 230px" clearable v-model="query.queryString.sn"
                placeholder="流转序号"></el-input>
              <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
            </div>
            <z-table :list="list" :tableProps="tableProps" :columns="columns">
              <template v-slot:content="v">
                <span v-if="v.key == 'error_flag'"><span :class="v.row.statusClass">{{ v.row[v.key] }}</span></span>
                <span v-else-if="v.key == 'serial_number'">
                  <a href="#" @click.stop="goLog(v.row)" class="text-blue text-bold">{{ v.row[v.key] }}</a>
                </span>
                <span v-else>{{ v.row[v.key] }}</span>
              </template>
            </z-table>
            <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
              @change="getList"></z-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import * as echarts from 'echarts'
const statusArry = { 0: 'OK', 1: 'NG' }
const statusClass = { 0: 'bg-green', 1: 'bg-red' }
export default {
  mixins: [commonMixin],
  props: {
    mo_no: {
      type: String,
      default: null,
    },
  },
  name: 'tab6',
  watch: {
    mo_no: {
      handler(n, o) {
        if (n) {
          this.query.queryString.mono = n
          this.search()
        } else {
          this.list = []
          this.total = 0
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      options: { line: [], group: [] },
      apiList: this.$api.wipDetailReport,
      wipReportApi: this.$api.wipReport,
      SumByGroup: this.$api.SumByGroup,
      showEcharts: false,
      query: {
        queryString: {
          mono: null,
          sn: null,
        },
        page: 1,
        size: 10,
      },

      tableProps: {
        border: true,
        hideOperations: true,
      },
      columns: [
        // { title: '工单号', key: 'mo_no', width: 140, fixed: 'left' },
        { title: '流转序号', key: 'serial_number', width: 170, fixed: 'left' },
        { title: '包装层级', key: 'package_level', width: 120, fixed: 'left' },
        { title: '最后线别', key: 'line_name', width: 120 },
        { title: '最后工序', key: 'group_name', width: 120 },
        { title: '过站时间', key: 'in_station_time', width: 140 },
        { title: '品质指站', key: 'next_station_name', width: 120 },
        { title: '产品型号编码', key: 'sku_no', width: 100 },
        { title: '产品型号名称', key: 'sku_name' },
        { title: '当前产品数量', key: 'batch_qty', width: 100, fixed: 'right' },
        { title: '状态', key: 'error_flag', width: 70, fixed: 'right' },
      ],
    }
  },
  methods: {
    formatList(data) {
      return data.map((item) => {
        let tmp = { ...item }
        tmp.statusClass = 'text-label ' + statusClass[tmp.error_flag]
        tmp.error_flag = statusArry[tmp.error_flag]
        return tmp
      })
    },
    goLog(row) {
      this.$store.dispatch('delView', { name: 'wipLogReport' }).then((r) => {
        this.$router
          .push({
            name: 'wipLogReport',
            params: {
              sn: row.serial_number,
            },
          })
          .catch(() => {})
      })
    },
    drawEcharts(data) {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '在制品信息',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      }
      myChart.setOption(option)
      myChart.on('click', (data) => {
        this.query.queryString.group = data.data.group_id
        this.getList()
      })
    },
    search() {
      this.getList()
      this.getSumByGroup()
    },
    // 获取图表数据
    getSumByGroup() {
      this.showEcharts = true
      this.pageLoading = true
      this.$request(this.SumByGroup, { moNoOrId: this.mo_no, page: 1, size: 999 })
        .then((r) => {
          this.pageLoading = false
          if (!r.list.length) return (this.showEcharts = false)
          let data = r.list.map((i) => {
            return {
              value: i.sn_qty,
              name: i.group_name || '未开始',
              mo_no: i.mo_no,
              group_id: i.group_id,
            }
          })
          this.$nextTick(() => {
            this.drawEcharts(data)
          })
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
  },

  created() {
    this.$request(this.$api.line + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
      this.options.line = r.list
    })
    this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' }).then((r) => {
      this.options.group = r
    })
  },
}
</script>

<style>
</style> 